<template>
  <div class="tmpl">
<!-- 购物车的商品 -->
<div class="row" v-for="(item,index) in shopcarlist">
	<div class="left">
		<mt-switch class="switch" v-model="values[index]"></mt-switch>
	</div>
	<div class="contn">
    <img :src="item.thumb_path" alt="" >
	</div>
	<div class="right">
		<h4>{{item.title}}</h4>
		<span>￥{{item.sell_price}}</span>
		<subnumder :initcount="item.count" class="subnumder" v-on:count="getcount"></subnumder>
			<a v-on:click="cliks">删除</a>
	</div>
		
</div>


<!-- 计算总计 -->
<div class="total">
	<div class="left"> 
		<h4>总计（不含运费）</h4>
		<span>已选：{{stlectedcount}}件 总计：{{settment}}（元）</span>
	</div>
	<div class="right">
		<mt-button class="settm" type="danger" size="small">去结算</mt-button>
	</div>
</div>

<!-- {{values}} -->



  </div>
</template>  

<style lang="scss" scoped>
.total{
	height: 80px;
	margin: 10px 0 0 0 ;
	padding: 10px;
	background-color: rgba(0,0,0,0.1)
}
.total .left h4{
	color: red;
	margin:  10px 0 ;
}
.total .left span{
	font-size: 14px;
}
.total .left {
	width: 70%;
	float: left;
}
.total .right {
	height: 80px;
	width: 28%;
	float: right;
}
.total .settm{
	margin: 15px 0 0 0;
}

// 购物车的商品 
.row{
	display: flex;
	margin: 5px 0;
	border-bottom: 1px solid #eee;
	padding: 5px 0;
	}
.row .left{
	flex: 0 0 20px;
 padding:0 5px;
}

.switch{
	margin: 20px 0 0 0;
}
.row .contn{
	flex: 0 0 75px;
}
.row .right{
	flex: 1;
	margin: 0 0 0 5px;
}
 .contn img{
	 width: 75px;
	 height: 75px;
 }
.row .right h4{
	padding: 5px 0;
	color: #0049ff
}
.row .right span{
	font-size: 14px;
  color: red;
}
.row .right a{
	font-size: 14px;
  color:#646464;
}
.row .right .subnumder{
	display:inline;
		margin: 0 5px ;
}

</style>

<script>
//引用key
// import common from '../../kits/common.js';
// 导入subnumbre.vue
import subnumder from '../subcomp/subnumber.vue';
import {getItem} from '../../kits/localStorageHelper.js';
import { MessageBox } from 'mint-ui';
export default {
 		data(){
 			return{
				//  clicks:{},
				//  value:false,
				stlectedcount:0,//商品总个数
				values:[],//存
				 shopcarlist:[
					 {
						 id:87,
						 count:1,
						 title:"华为荣耀9 4g+64g 6g+64g",
						 sell_price:2501,
						 thumb_path:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=33275663,2336373929&fm=11&gp=0.jpg"

					 },
					  {
						 id:88,
						 count:1,
						 title:"华为荣耀9 4g+64g 6g+64g",
						 sell_price:2501,
						 thumb_path:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=33275663,2336373929&fm=11&gp=0.jpg"

					 },
					  {
						 id:89,
						 count:1,
						 title:"华为荣耀9 4g+64g 6g+64g",
						 sell_price:2501,
						 thumb_path:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=33275663,2336373929&fm=11&gp=0.jpg"

					 }
				 ]
 			}
		 }
		//  ,created(){
		// 	 this.initPageData();

		//  }
		 ,methods:{
					
				cliks(){
					MessageBox({
							title: '主人',
							message: '确定要删除?',
							showCancelButton: true
							});
				},

			//  获取到数量选择组件中的数值
			 getcount(count){

				 		
			 }
			 // 获取商品id的商品数据
			,initPageData(){
				// 从lscalstorege中获取数据
				// arr 的数据格式 [{goodsid:1,counte:1},{goodsid:1,counte:2},{},{}]
				let arr = getItem();
				let goodsobj = {1:3};//goodsid值属性名称，counte属性值
				
				arr.forEach(item=>{
					if(goodsObj[item.goodsid]){
						let tmpcount = goodsObj[item.goodsid];
						tmpcount+=item.count;
						goodsObj[item.goodsid] = tmpcount;
					}else{
						goodsObj[item.goodsid] = item.count;
					}

				});
				// 将goodsObj名称拿出来
				let idarr = [];
				for(let goodsidvalue in goodsObj){
					idarr.push(goodsidvalue);
				}
				let ids = idarr.join(',');
				


				// 请求api获取数据
				let url = common.apihost+'api/goods/gethocarlist/'+ids
				this.$http.get(url).them(res=>{
					res.body.message.forEach(item=>{
					item.thumb_path = common.imghost + item.thumb_path;
					item.count = goodsObj[item.id];

					//初始化
					this.values=false
				});
				this.shopcarlist = res.body.message;
				});

				

			},
			getTotalAmout(){
				let totalAmout = 0;
				this.values.forEach((item,index)=>{
					if(item == true){
						let goodsinfo = this.shopcarlist[index];
						let amount = goodsinfo.count * goodsinfo.sell_price;
						totalAmout+=amount;
					}
				});
				return totalAmout;
			}

		 }
			,computed:{
				settment(){
					// 同据当前个数
					let trueArr = this.values.filter(v=>v==true);
					this.stlectedcount = trueArr.length;
					// 计算价格
					// console.log(this.stltctedcount);
					return this.getTotalAmout();
				}
			}

		   ,components:{
            
            subnumder
        }
}
</script>

